<template>
    <div class="card-container" @click="doClickCard()">
        <div class="top">
            <div style="display: flex;">
                <div class="top-left">
                    <el-avatar size="60" :src="circleUrl"></el-avatar>
                </div>
                <div class="top-mid">
                    <span style="font-size: 24px;">{{ oneData.name }}</span>
                    <div>
                        <el-tag v-for="item in oneData.tags" :key="item" size="mini">
                            {{ item }}
                        </el-tag>
                    </div>
                </div>
            </div>
            <div class="top-right">
                <span style="color: red;">{{ oneData.maxAnnualReturns }}</span>
                <span style="font-size: 12px;color:#C0C4CC">最大历史年化收益率</span>
            </div>
        </div>
        <div class="bottom">
            <el-tag v-for="item in oneData.examples" :key="item.name" size="mini">
                <div>
                    <span style="margin-right: 1rem;">{{ item.name }}</span>
                    <span style="color: red;">{{ item.annualReturns }}</span>
                </div>
            </el-tag>
        </div>
    </div>
</template>
  
<script>
import { string } from 'clipboard';
import { mapGetters } from 'vuex'


export default {
    name: 'DataCard',
    props: {
        'oneData': {
            type: Object,
            default: {
                circleUrl: '',
                name: 'test',
                tags: ['中受益', '高风险'],
                maxAnnualReturns: '+22.90%',
                examples: [{
                    name: 'examples1',
                    annualReturns: "+10%"
                }, {
                    name: 'examples2',
                    annualReturns: "+15%"
                }],
            }
        },
    },
    components: {},
    data() {
        return {
        }
    },
    methods: {
        getDesc() {
            return this.oneData.name;
        },
        doClickCard() {
            console.log(9999, this.getDesc());
            //window.alert(item.name);
        }
    },
    computed: {

    },
    created() {

    }
}
</script>
  
<style lang="scss" scoped>
.card-container {

    width: 80%;
    height: 120px;
    border: 1px solid #E9E9E9;
    padding: 10px 10px;

    .top {
        display: flex;
        justify-content: space-between;

        .top-left {
            margin-right: 5px;
        }
    }

    .top-mid {
        ::v-deep .el-tag--mini {
            margin-right: 2px;
        }
    }

    .top-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: right;
    }

    .bottom {

        display: flex;
        justify-content: space-around;
        margin-top: 1.5rem;

    }

}
</style>
  
  